<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2023/10/9
  Time: 9:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>离职员工表</title>
    <%--引入vue的js--%>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--引入axios的依赖-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>
<body>
<div id="app">
    <el-form :inline="true" :model="staffForm" class="demo-form-inline">
        <el-form-item label="">
            <el-input v-model="staffForm.staffid" placeholder="请输入员工工号搜索"></el-input>
        </el-form-item>
        <el-form-item label="">
            <el-input v-model="staffForm.staffname" placeholder="请输入员工姓名搜索"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button type="primary" @click="refresh1">刷新</el-button>
        </el-form-item>
    </el-form>
    <el-table
            :data="staffs"
            style="width: 100%"
    >
        <el-table-column
                prop="staffid"
                prop="staffid"
                label="员工工号"
        >
        </el-table-column>
        <el-table-column
                prop="staffname"
                label="员工姓名"
        >
        </el-table-column>
        <el-table-column
                prop="idcard"
                label="身份证号码"
        >
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址"
        >
        </el-table-column>
        <el-table-column
                prop="phone"
                label="电话号码"
        >
        </el-table-column>
        <el-table-column
                prop="entrytime"
                label="入职日期"
        >
        </el-table-column>
            <el-table-column
                    prop="leavetime"
                    label="离职日期"
            >
            </el-table-column>

        </el-table-column>
            <el-table-column
                    prop="state"
                    label="状态">
                <trmplate slot-scope="scope">
                    <el-tag
                            type="danger"
                            v-if="scope.row.state==0"
                            effect="dark">
                        离职
                    </el-tag>

                </trmplate>
        </trmplate>
            </el-table-column>
        <el-table-column
                prop="branchname"
                label="店名"
        >
        </el-table-column>
        <el-table-column
                prop="deptname"
                label="部门名称"
        >
        </el-table-column>
        <el-table-column
                prop="rolename"
                label="职位"
        >
        </el-table-column>
    </el-table>

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            //所有员工的信息
            staffs: [],
            //总条数
            total: 0,
            //每页显示的大小
            pageSize: 5,
            //当前页码
            current: 1,
            //表单搜索对象
            staffForm: {},
            //branchs所有门店的列表
            branchs: [],
            //
            tableRowClassName: 111
        },
        created() {
            this.initTable();
            this.initBranch();
        },
        methods: {
            initTable() {
                axios.post("/OutSaff/list?current=" + this.current + "&pageSize=" + this.pageSize, this.staffForm).then(function (res) {
                    app.staffs = res.data.data.list;
                    app.total = res.data.data.total;
                })
            },
            initBranch() {
                axios.get("/brand/list").then(function (resp) {
                    app.branchs = resp.data.data;

                })
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.initTable()
            },
            handleCurrentChange(val) {
                this.current = val;
                this.initTable();
            },
            //    刷新方法
            refresh1() {
                this.initTable()
            },
            //搜索
            search() {
                this.initTable();
            },
        }
    })
</script>
</html>
